<template>
  <view class="login-box">
    <view class="back">
      <t-icon size="25" name="arrow-left" color="#000" @tap="goBack"></t-icon>
    </view>
    <view class="bg"></view>
    <view class="logo-box">
      <t-image class="img" :src="logo"></t-image>
      <!-- <text style="font-size: 48rpx; margin-top: 20rpx; font-weight: bold;">禁止观看</text> -->
      <t-image class="text" :src="logoText"></t-image>
    </view>
    <view class="action-box">
      <text class="text">账密登录</text>
      <t-form
        labelPosition="left"
        :model="formState"
        :rules="rules"
        ref="formRef"
      >
        <t-form-item prop="phone" class="form-item">
          <t-input
            v-model="formState.phone"
            border="none"
            placeholder="请输入手机号"
          >
            <template #prefixIcon>
              <t-image
                :style="{ width: '20px', height: '20px' }"
                fit="fill"
                :src="phoneImage"
              ></t-image>
            </template>
          </t-input>
        </t-form-item>

        <t-form-item prop="password" class="form-item">
          <t-input
            v-model="formState.password"
            border="none"
            placeholder="请输入密码"
            :type="passwordType"
            :show-password="false"
          >
            <template #prefixIcon>
              <t-image
                :style="{ width: '20px', height: '20px' }"
                fit="fill"
                :src="passImage"
              ></t-image>
            </template>
            <template #suffix>
              <t-image
                :style="{ width: '20px', height: '20px' }"
                fit="fill"
                @click="getPassword"
                :src="passwordImage"
              ></t-image>
            </template>
          </t-input>
        </t-form-item>
      </t-form>
      <div class="button" @click="handleSubmit">登录</div>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from "vue";
import loginApi from "@/api/loginApi";
import { Toast } from "tdesign-mobile-vue";
import logo from "@/assets/login/logo.png";
import logoText from "@/assets/login/logo-text.png";
import phoneImage from "@/assets/login/phone.png";
import passImage from "@/assets/login/key.png";
import openeyes from "@/assets/login/openeyes.png";
import closedeyes from "@/assets/login/closedeyes.png";
import { useCookies } from "vue3-cookies";
import { useRouter } from "vue-router";
const router = useRouter();
const { cookies } = useCookies();
const showPassword = ref(false);
const formRef = ref(null);
const passwordImage = ref(closedeyes);
const formState = reactive({
  phone: "",
  password: "",
});
const code = ref("");
const passwordType = ref("password");
const rules = ref({
  phone: [
    {
      type: "number",
      required: true,
      message: "请输入手机号码",
      whitespace: true,
      trigger: ["change", "blur"],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value);
      },
      message: "手机号码格式不正确",
      // 触发器可以同时用blur和change
      trigger: ["change", "blur"],
    },
  ],
  password: [
    {
      type: "string",
      required: true,
      message: "请输入密码",
      whitespace: true,
      trigger: ["change", "blur"],
    },
    {
      type: "string",
      required: true,
      len: 6,
      message: "密码长度大于6位",
      whitespace: true,
      trigger: ["change", "blur"],
    },
  ],
});

//切换密码框属性
const getPassword = () => {
  showPassword.value = !showPassword.value;
  if (showPassword.value) {
    passwordType.value = "text";
    passwordImage.value = openeyes;
  } else {
    passwordType.value = "password";
    passwordImage.value = closedeyes;
  }
};

// 登录
const handleSubmit = async () => {
  const validPass = await formRef.value.validate();
  if (validPass) {
    const result = await loginApi.accountLogin({
      phone: formState.phone,
      password: formState.password,
      platform: "PWA",
      // inviterCode: code.value,
    });
    if (result.code === 0) {
      Toast({
        duration: 2000,
        message: "登录成功",
      });
      localStorage.setItem("token", result.token);
      cookies.set("token", result.token);
      localStorage.setItem("userInfo", JSON.stringify(result.user));
      router.push({
        name: "comic",
      });
    } else {
      Toast({
        duration: 2000,
        message: result.msg,
      });
      localStorage.clear();
      router.push({
        name: "login",
      });
    }
  }
};

// 获取剪切板内容
const getClipboardData = async () => {
  const result = await uni.getClipboardData();
  const data = result.data;
  if (data) {
    if (data.split("：").includes("怪兽漫画礼品码")) {
      code.value = data.split("：")[1];
    }
  }
};

// onLoad(() => {
// 	getClipboardData();
// })

// 返回
const goBack = () => {
  router.back();
};
</script>

<style lang="scss" scoped>
.login-box {
  display: flex;
  height: 100vh;
  background: #fff;
  flex-direction: column;
  position: relative;

  .back {
    padding-top: var(--status-bar-height);
    padding-left: 15px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    .img {
      width: 20px;
      height: 20px;
    }
  }

  .bg {
    width: 110px;
    height: 110px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(270deg, #9af144 0%, #ff696b 100%);
    filter: blur(125px);
  }

  .logo-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 93px;

    .img {
      // width: 160rpx;
      // height: 160rpx;
      width: 130px;
      height: 130px;
      border-radius: 30px;
    }

    .text {
      width: 96px;
      height: 22px;
      margin-top: 5px;
    }
  }

  .action-box {
    padding: 0 30px;
    display: flex;
    flex-direction: column;

    .text {
      color: #101010;
      text-align: center;
      font-size: 20px;
      font-weight: 500;
      margin-top: 50px;
    }

    .form-item {
      border-bottom: rgba(0, 0, 0, 0.1) solid 1px;
      margin-top: 20px;
      padding-bottom: 10px;
    }

    .button {
      border: none;
      margin-top: 20px;
      border-radius: 50px;
      background: linear-gradient(90deg, #ffc151 0%, #ff876f 100%);
      color: #000;
      font-size: 16px;
      font-weight: 550;
      height: 40px;
      line-height: 40px;
    }
  }
}
</style>
